<template>
  <div class="title">
    <span>用户注册</span>
    <i>注册后享受更多服务</i>
  </div>
  <el-form
    ref="ruleForm"
    class="login-form"
    :model="obj.loginForm"
    :rules="rules"
    label-position="top"
    size="small"
  >
    <el-form-item prop="username" label="用户名">
      <el-input
        v-model="obj.loginForm.username"
        autocomplete="off"
        placeholder="请输入账户"
        @keyup.enter.native="submitForm"
        size="small"
      >
      </el-input>
    </el-form-item>
    <el-form-item prop="password" label="密码">
      <el-input
        type="password"
        v-model="obj.loginForm.password"
        placeholder="请输入密码"
        :show-password="true"
        @keyup.enter.native="submitForm"
        size="small"
      >
      </el-input>
    </el-form-item>
    <el-form-item prop="oldPassword" label="重复密码">
      <el-input
        type="password"
        v-model="obj.loginForm.oldPassword"
        placeholder="请再次输入密码"
        :show-password="true"
        @keyup.enter.native="submitForm"
        size="small"
      >
      </el-input>
    </el-form-item>
    <el-form-item prop="phone" label="手机号">
      <el-input
        type="text"
        v-model="obj.loginForm.phone"
        placeholder="请输入手机号"
        @keyup.enter.native="submitForm"
        size="small"
      >
      </el-input>
    </el-form-item>
    <el-form-item>
      <el-button @click="submitForm">登 录</el-button>
    </el-form-item>
  </el-form>
  <div class="footer-btn">
    <span @click="onSignUp(0)">返回</span>
  </div>
</template>
<script lang="ts" setup>
import { checkPhoneAndAccount, signupApi } from '@/api/api'
import { reactive, ref } from 'vue'
import { useStore } from 'vuex'
import { validAccount, validMobile, validPassword } from '@/utils/validate'
import { Message } from '@element-plus/icons'
import { ElMessage } from 'element-plus'

const obj = reactive({
  loginForm: {
    username: '',
    password: '',
    oldPassword: '',
    phone: ''
  }
})
type VoidNoop = (arg?: Error) => void
const store = useStore()
const ruleForm = ref<any>(null)
const vaildateUserName = (rule: any, value: string, callback: VoidNoop) => {
  if (value === '') {
    callback(new Error('请输入账号'))
  } else {
    checkPhoneAndAccount({ account: obj.loginForm.username, code: 0 })
      .then(res => {
        console.log(res, res.data.registerStatus)
        if (res.data.registerStatus) {
          callback(new Error('当前账号已存在，请重新输入'))
        } else if (!validAccount(value)) {
          callback(new Error('字母+数字8-12位'))
        } else {
          callback()
        }
      })
      .catch(err => {
        console.log(err)
      })
  }
}
const vaildatePassword = (rule: any, value: string, callback: VoidNoop) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else if (!validPassword(value)) {
    callback(new Error('密码必须包含大小写字母/数字/符号任意两者组合'))
  } else {
    callback()
  }
}
const vaildateOldPassword = (rule: any, value: string, callback: VoidNoop) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else if (value !== obj.loginForm.password) {
    callback(new Error('两次输入密码不一样，请重新输入'))
  } else {
    callback()
  }
}
const vaildatePhone = (rule: any, value: string, callback: VoidNoop) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else if (!validMobile(value)) {
    callback(new Error('手机格式输入错误，请重新输入'))
  } else {
    callback()
  }
}
const rules = {
  username: [{ validator: vaildateUserName, trigger: 'blur' }],
  password: [{ validator: vaildatePassword, trigger: 'blur' }],
  oldPassword: [{ validator: vaildateOldPassword, trigger: 'blur' }],
  phone: [{ validator: vaildatePhone, trigger: 'blur' }]
}
const submitForm = (e: any) => {
  e.preventDefault()
  ruleForm.value.validate((valid: boolean) => {
    console.log(valid)
    if (valid) {
      signupApi({ ...obj.loginForm })
        .then(res => {
          ElMessage({
            type: 'success',
            message: '注册成功，请登录'
          })
          store.dispatch('app/toggleLoginFormType', 0)
        })
        .catch(err => {})
    }
  })
}
const onSignUp = (type: number) => {
  store.dispatch('app/toggleLoginFormType', type)
}
</script>
<style scoped lang="scss">
.title {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  padding: 0 0 14px 0;
  span {
    font-size: 24px;
    color: #000;
  }
  i {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.514);
    font-style: inherit;
    margin-top: 10px;
  }
}
.login-form {
  width: 80%;
  margin: 0 auto;

  ::v-deep(.el-form-item__label) {
    color: rgba(0, 0, 0, 0.5);
    font-size: 14px;
    font-weight: bold;
    padding: 0;
    line-height: 26px;
  }
  ::v-deep(.el-input__inner) {
    background: none;
    border: 0;
    border-radius: 0;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.3);
    position: relative;
    color: #000;
    &:focus {
      border-bottom: 1px solid rgb(75, 75, 75);
    }
  }

  ::v-deep(.el-button) {
    background: #00897b;
    color: #fff;
    width: 100%;
    border: 0;
    &:hover {
      background: #007f72;
    }
  }
  ::v-deep(.el-form-item__error) {
    padding-left: 15px;
  }
}
.footer-btn {
  display: flex;
  width: 80%;
  margin: 0 auto;
  justify-content: center;
  span {
    color: rgb(70, 70, 70);
    cursor: pointer;
    &:hover {
      color: rgb(119, 119, 119);
    }
  }
}
</style>
